<template>
  <div class="grid">
    <div class="grid-item" v-for="(item, index) in workList" :key="index" @click="previewWork(item)">
      <div class="image-container">
        <el-image
          v-if="item.images && item.images.length > 0"
          class="work-image"
          :src="item.images[0].url"
          fit="cover"
          lazy
        />

        <!-- 置顶标签 -->
        <div v-if="item.is_pinned" class="pinned-tag">
          <i class="el-icon-top"></i>
          <span class="pinned-text">置顶</span>
        </div>

        <!-- 锁定图标（私密作品） -->
        <div v-if="item.is_private" class="lock-icon">
          <i class="el-icon-lock"></i>
        </div>
      </div>

      <div class="info-container">
        <div class="work-title">{{ item.title || '' }}</div>
        <div class="work-date">{{ formatDate(item.created_at) }}</div>
        <div class="stats-container">
          <div class="stat-item">
            <i class="el-icon-thumb el-icon--left"></i>
            <span class="stat-text">{{ item.like_count || 0 }}</span>
          </div>
          <div class="stat-item">
            <i class="el-icon-star-off el-icon--left"></i>
            <span class="stat-text">{{ item.favorite_count || 0 }}</span>
          </div>
          <div class="stat-item">
            <i class="el-icon-share el-icon--left"></i>
            <span class="stat-text">{{ item.share_count || 0 }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkCard',
  props: {
    workList: {
      type: Array,
      default: () => [],
    },
    from: {
      type: String,
      default: '',
    },
  },
  methods: {
    // 预览作品
    previewWork(work) {
      this.$store.dispatch('setExploreDetail', work)
      this.$store.dispatch('setPersonalWorks', this.workList)
      this.$router.push({
        path: '/explore/personalWorks',
        query: { from: this.from || '' },
      })
    },

    // 格式化日期（PC端显示更友好的格式）
    formatDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      return `${date.getFullYear()}-${this.padZero(date.getMonth() + 1)}-${this.padZero(date.getDate())}`
    },

    // 补零函数
    padZero(num) {
      return num < 10 ? `0${num}` : num
    },
  },
}
</script>

<style lang="scss" scoped>
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PC端一行显示4个 */
  gap: 20px;
  margin-top: 20px;
}

.grid-item {
  background-color: #1f1f1f;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
  height: 360px; /* 固定高度，保持卡片一致性 */

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  }
}

.image-container {
  position: relative;
  height: 240px; /* 图片区域高度 */
  width: 100%;
  overflow: hidden;
}

.work-image {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;

  &:hover {
    transform: scale(1.05);
  }
}

/* 置顶标签 */
.pinned-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(33, 32, 32, 0.9);
  border-radius: 20px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #ffffff;
  z-index: 2;
}

.pinned-text {
  margin-left: 6px;
}

/* 锁定图标 */
.lock-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(31, 31, 31, 0.7);
  border-radius: 50%;
  padding: 5px;
  color: #fff;
  z-index: 2;
}

.info-container {
  width: 100%;
  padding: 15px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
}

.work-title {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}

.work-date {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 10px;
}

.stats-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #9ca3af;
}

.stat-text {
  margin-left: 5px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
</style>
